<template>
	<view>
		<u-toast ref="uToast" /><u-no-network></u-no-network>
		<u-navbar :title="title" safeAreaInsetTop fixed placeholder>
		    <view class="coreshop-navbar-left-slot" slot="left">
		        <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
		        <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
		        <u-icon name="home" size="22" @click="goHome"></u-icon>
		    </view>
		    <view slot="right">
		    </view>
		</u-navbar>
		<u-sticky customNavHeight="48">
		        <view class="head_box coreshop-bg-red"> 
				     <view class="team-data-box coreshop-flex coreshop-justify-between"></view>
		            <!-- 直推 -->
		            <view class="direct-box coreshop-flex coreshop-justify-between">
		                <view class="direct-item ">
		                    <view class="item-title">本月订单数量（单）</view>
		                    <view class="item-value">{{ monthOrder || '0'  }}</view>
		                </view>
		                <view class="direct-item">
		                    <view class="item-title">本月订单金额（元）</view>
		                    <view class="item-value">{{ monthOrderMoney || '0'  }}</view>
		                </view>
		            </view>
		
		            <!-- 状态分类 -->
		            <view class="coreshop-flex coreshop-justify-between nav-box">
		                <view class="state-item flex-sub " v-for="(state, index) in statusList" :key="state.value" @tap="onTab(state.value)">
		                    <text class="state-title" :class="{ 'title-active': stateCurrent === state.value }">{{ state.name }}</text>
		                    <text class="underline" :class="{ 'underline-active': stateCurrent === state.value }"></text>
		                </view>
		            </view>
		        </view>
		    </u-sticky>
		    <view class="content_box">
		        <!-- 订单列表 -->
		        <view class="order-list" v-for="item in list" :key="item.id" v-if="list.length > 0">
		            <view class="order-head coreshop-flex coreshop-justify-between coreshop-solid-bottom">
		                <text class="order-code">订单编号：{{ item.orderId }}</text>
		                <text class="order-state">{{item.isSettlement==1?'已结算':item.isSettlement==2?'未结算':'已退款'}}</text>
		            </view>
		            <view class="order-from coreshop-flex coreshop-justify-between coreshop-solid-bottom">
		                <view class="from-user coreshop-flex coreshop-align-center">
		                    <text>下单人：</text>
		                    <u-avatar :src="item.buyUserAvatar" size="20"></u-avatar>
		                    <text class="user-name">{{ item.buyUserNickName }}</text>
		                </view>
		                <view class="order-time">{{ $u.timeFormat(item.createTime, ' yyyy.mm.dd hh:MM ') }}</view>
		            </view>
		            <view class="goods-card coreshop-flex coreshop-align-center coreshop-solid-bottom" v-for="goods in item.agentOrderDetails" :key="goods.id">
		                <view class="goods-img-box"><image class="goods-img" :src="goods.imageUrl" mode=""></image></view>
		                <view class="goods-info coreshop-flex coreshop-flex-direction coreshop-align-center coreshop-justify-between">
		                    <view class="goods-title more-t">{{ goods.name }}</view>
		                    <view class="goods-sku">数量: {{ goods.productNums }}；{{ goods.addon || '' }}</view>
		                    <view class="total-box  coreshop-flex coreshop-align-center coreshop-justify-between">
		                        <view class="goods-price">
		                            {{ goods.productPrice }}
		                            <text class="goods-state" style="display: none;">未结算</text>
		                        </view>
		                        <view class="coreshop-flex coreshop-align-center">
		                            <text class="name">佣金：</text>
		                            <text class="commission-num">{{ goods.amount }}</text>
		                        </view>
		                    </view>
		                </view>
		            </view>
		            <view class="total-box coreshop-flex coreshop-align-center coreshop-justify-between coreshop-padding-left-10 coreshop-padding-right-10">
		                <view class="num-price">商品总价：￥{{ item.goodsAmount }}， 实付款:￥{{ item.payedAmount }}， 优惠金额:￥{{ Math.round(item.goodsAmount-item.payedAmount).toFixed(2) }}，提成：￥{{ item.amount || '0'}}</view>
		                <view class="x-f"></view>
		            </view>
		        </view>
		        <!-- 无数据时默认显示 -->
		        <view class="coreshop-emptybox" v-if="list.length <= 0">
		            <u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/data.png'" icon-size="150" text="当前日明细" mode="list"></u-empty>
		        </view>
		        <!-- 更多 -->
		        <u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-top="20" margin-bottom="20" v-if="list.length" />
		    </view> 
	</view>
</template>

<script>
	export default { 
	    data() {
	        return {
				title:'销售员订单',
				userId:0,
				monthOrder:0,
				monthOrderMoney:0,
				stateCurrent: '0', //默认
				statusList: [
				    {
				        name: '全部',
				        value: '0'
				    },
				    {
				        name: '已结算',
				        value: '1'
				    },
				    {
				        name: '未结算',
				        value: '2'
				    },
				    {
				        name: '已退款',
				        value: '3'
				    }
				],
				list: [],
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
				    loadmore: '轻轻上拉',
				    loading: '努力加载中',
				    nomore: '实在没有了'
				},
			}
		},
		onLoad(options) {
			if(options.title){
				this.title=options.title;
			}
			if(options.userId){
				this.userId=options.userId;
			}
			 this.getAgentOrder();
		},
		onReachBottom() {
		    if (this.status === 'loadmore') {
		         this.getAgentOrder();
		    }
		},
		methods: {
		    //触底加载数据
		    bottomOut() {
		        if (this.status == 'nomore') {
		            return;
		        }
		        if (this.status == 'loadmore') {
		            this.getAgentOrder();//调用数据请求
		        }
		    },
			getAgentOrder(){
				let data = {
				    page: this.page,
				    limit: this.limit,
				    id: this.stateCurrent,
					otherData:this.userId
				}
				this.status = 'loading'
				this.$u.api.getAgentOrder(data).then(res => {
				    //console.log(res);
				    uni.hideLoading();
				    if (res.status) {
				        let _list = res.data 
						this.monthOrder=res.code;
						this.monthOrderMoney=res.otherData;
						
				        if (_list) {
				            _list.forEach(item => {
				                this.$set(item, 'slide_x', 0)
				            })
				            this.list = [...this.list, ..._list]
				        }
				        if (res.code > this.list.length) {
				            this.page++
				            this.status = 'loadmore'
				        } else {
				            this.status = 'nomore'
				        }
				    } else {
				        this.$u.toast(res.msg)
				    }
				});
				uni.hideLoading();
			},
		}
	}
</script>

<style lang="scss">
	.direct-box { margin: 10px;
	    .direct-item { width: 170px; height: 57.5px; background: #ffffff; border-radius: 10px; padding: 10px; margin: 0 5px;
	        .item-title { font-size: 11px; font-weight: 500; color: #999999; margin-bottom: 3px; }
	        .item-value { font-size: 19px; font-weight: 600; color: #333333; }
	    }
	}
	.team-data-box { padding: 10px;
	    .data-card { width: 170px; background: #ffffff; border-radius: 10px; padding: 10px; margin: 0 5px;
	        .item-title { font-size: 11px; font-weight: 500; color: #999999; line-height: 15px; margin-bottom: 5px; }
	        .total-item { margin-bottom: 10px; }
	        .total-num { font-size: 19px; font-weight: 600; color: #333333; }
	        .category-num { font-size: 13px; font-weight: 600; color: #333333; }
	    }
	}
	.head_box { width: 100%; background-image: url('/static/images/common/bg.png'); background-size: cover; background-position: center;
	    .cu-back { color: #fff; font-size: 20px; }
	    .head-title { font-size: 19px; color: #fff; }
	}
	.nav-box { background-color: #fff; padding: 0 15px; }
	.state-item { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
	    .state-title { color: #666; font-weight: 500; font-size: 14px; line-height: 45px; }
	    .title-active { color: #333; }
	    .underline { display: block; width: 34px; height: 2px; background: #fff; border-radius: 1px; }
	    .underline-active { background: #e54d42; display: block; width: 34px; height: 2px; border-radius: 1px; }
	}
	.order-list { background-color: #fff; margin: 10px; border-radius: 10px;
	    .order-head { padding: 10px;
	        .order-code { font-size: 13px; font-weight: 400; color: #999999; }
	        .order-state { font-size: 13px; font-weight: 500; color: #05c3a1; }
	    }
	    .order-from { /* background-color: #f9f9f9;*/ padding: 10px;
	        .from-user { font-size: 12px; font-weight: 400; color: #666666;
	            .user-avatar { width: 13px; height: 13px; border-radius: 50%; margin-right: 4px; }
	            .user-name { font-size: 12px; font-weight: 400; color: #999999; }
	        }
	        .order-time { font-size: 12px; font-weight: 400; color: #999999; }
	    }
	    .goods-card { padding: 10px 10px;
	        .goods-img-box { margin-right: 15px;
	            .goods-img { width: 80px; height: 80px; background-color: #ccc; }
	        }
	        .goods-info { height: 80px; width: 300px; align-items: flex-start;
	            .goods-title { font-size: 14px; font-weight: 500; color: #333333; }
	            .goods-sku { font-size: 12px; font-weight: 400; color: #666666; }
	            .goods-price { font-size: 15px; font-weight: 500; color: #333333;
	                .goods-state { line-height: 15px; padding: 0 5px; background: #f1eeff; border: 0.5px solid #e54d42; border-radius: 15px; margin-left: 10px; font-size: 10px; color: #e54d42; }
	                &::before { content: '￥'; font-size: 10px; }
	            }
	        }
	    }
	    .total-box { height: 30px; width: 100%;
	        .num-price { font-size: 12px; font-weight: 400; color: #999999; }
	        .name { font-size: 12px; font-weight: 400; color: #999999; }
	        .commission-num { font-size: 15px; font-weight: 400; color: #eb2b3d;
	            &::before { content: '￥'; font-size: 11px; }
	        }
	    }
	} 
</style>